<template>
	<view class="content">
		<!-- 状态栏高度 -->
		<!-- <view class="status_bar"></view> -->
		<!-- banner -->
		<view class="banner">
			<!-- 放广告 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/index/fj.jpeg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/index/fj.jpeg"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 酒店筛选器 -->
		<view class="xz-hotel">
			<view class="hotel-header">
				<view class="xz-item">
					<text>酒店</text>
				</view>
				<view class="xz-item">
					<text>钟点房</text>
				</view>
				
			</view>

			<!-- 选项下面的部分 -->
			<view class="hotel-body">
				<view class="position">
					<text>包头昆都仑区博学路</text>
					<view class="gps">
						
							<image src="../../static/hotel/gps.png"></image>
						
							<text>我的位置</text>
						
					</view>
				</view>
				<!-- 日期选择 -->
				<view class="date-picker" @click="choseTime" v-if="choiceDate.length">
					<view class="date">
						<text>周{{choiceDate[0].week}}入住</text>
						<text>{{choiceDate[0].re}}</text>
					</view>
					<view class="night-num">
						<text>{{dayCount}}晚</text>
					</view>
					<view class="date">
						<text>周{{choiceDate[1].week}}离店</text>
						<text>{{choiceDate[1].re}}</text>
					</view>
				</view>
				
				<!-- <view class="search1">
					<text>试试搜：钢铁大街</text>
				</view> -->  
				
				<view class="btn-search">
					<button type="default">开始搜索</button>
				</view>
			</view>
		</view>


		<view class="tabbar">
			<!-- 业务服务 -->
			
			<my-grid :itemArr="itemArr"></my-grid> 
			
		</view>
		
		<!-- 酒店推荐 -->
		<view class="recommend-hotel">
			<view class="title">
				<text>酒店推荐</text>
			</view>
			
			<view class="waterfalls-flow">
				<waterfalls-flow :list="recommend">
					<template v-slot:default="item">
					      <!-- 此处添加插槽内容 -->
							<view class="cnt">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.text}}</view>
							</view>
					</template>
				</waterfalls-flow>
			</view>
			
		</view>
		
		<!-- 日期选择插件 -->
		<!--          监听日期改变的事件，  设置无界面            控制日期显示 --> 
		<date-picker @change="changeDate" :modal="true" :show="showCaledar"></date-picker>
	</view>
</template>

<script>
	import DatePicker from '../../components/date-picker/date-picker.vue'
	import MyGrid from '../../components/mygrid.vue'
	import waterfallsFlow from '../../components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue'
	export default {
		components: {
			DatePicker,
			MyGrid,
			waterfallsFlow
		},
		onLoad() {
			
		},
		data() {
			return {
				showCaledar: false,
				choiceDate: [],
				dayCount: 0,
				itemArr: [
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg",
						text: '优惠卷',
					},
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg",
						text: '收藏',
					},
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg",
						text: '足迹',
					},
					
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
						text: '酒店订单',
					},
					
				],
				recommend: [
					{
						id: 1,
						image_url: 'https://p1.meituan.net/320.0/tdchoteldark/320ce016a04535d0a1dadf97d4aa1c01268615.png',
						title: '咖啡酒店(万达店)',
						text: '金色胡杨林，勾魂的秋色',
						price_low: 190 
						
					},
					
					{
						id: 2,
						image_url: 'https://img1.qunarzz.com/sight/p0/201304/09/3661bb15b188e04fc8d65eac.jpg_256x160_99675040.jpg',
						title: '居延海',
						text: '海天一色秋意浓',
					},
						
					{
						id: 3,
						image_url: 'https://img1.qunarzz.com/sight/p0/1809/f6/f67f022d5b48967ca3.img.jpg_256x160_31c98a2d.jpg',
						title: '黑城弱水胡杨风景区',
						text: '看大漠古城的醉美秋色',
					},
					
					{
						id: 4,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/a9/a9d27764489ed9c8.img.jpg_256x160_d68805ff.jpg',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					
					{
						id: 5,
						image_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637321375&t=b919353bd3074bb89c02b7b5f6a59432',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					{
						id: 6,
						image_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637321375&t=b919353bd3074bb89c02b7b5f6a59432',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					
					{
						id: 7,
						image_url: 'https://img1.qunarzz.com/sight/p0/1809/f6/f67f022d5b48967ca3.img.jpg_256x160_31c98a2d.jpg',
						title: '黑城弱水胡杨风景区',
						text: '看大漠古城的醉美秋色',
					},
					
					{
						id: 8,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/a9/a9d27764489ed9c8.img.jpg_256x160_d68805ff.jpg',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
				]
			}
		},
		methods: {
			// 控制选择器的弹出和显示
			choseTime() {
				console.log("yes")
				this.showCaledar = !this.showCaledar
			},
			// 捕获子组件传递过来的参数
			changeDate({choiceDate, dayCount}) {
				// console.log(choiceDate + " " + dayCount)
				this.choiceDate = choiceDate
				this.dayCount = dayCount
				// this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '  共 ' + dayCount + ' 晚 ';
				// console.log(this.dateStr)
			},

		}
	}
</script>

<style lang="scss">
	
	.content {
		/* margin: 0 20rpx; */
		width: 100%;
		// banner
		.banner {
			width: 100%;
			height: 350rpx;
			swiper {
				height: 100%;
				.swiper-item {
					width: 100%;
					height: 100%;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
		
		.xz-hotel {
			
			margin: 0 20rpx;
			margin-top: 50rpx;
			
			// margin-top: 400rpx;
			background: #FFFFFF;  
			height: 500rpx;
			border-radius: 30rpx;
			overflow: hidden;
			.hotel-header {
				width: 100%;
				height: 100rpx;
				// background: #C0C0C0;
				background-color: rgba(255, 255, 25, 0.5);
				
				display: flex;
				align-items: center;
				justify-content: left;
				
				.xz-item {
					width: 20%;
					height: 100%;
					display: flex;
					align-items: center;
					background-color: #FFFFFF;
					
					text {
						margin: 0 auto;
					}
				}
			}
			
			.hotel-body {
				// width: 100%;
				margin: 0 40rpx;
				margin-top: 40rpx;
				
				.position {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text {
						font-size: 40rpx;
						font-weight: 700;
					}
					
					.gps {
						display: flex;
						flex-direction: column;
						align-items: center;
						image {
							width: 30rpx;
							height: 30rpx;
						}
						
						text {
							font-size: 20rpx;
							font-weight: 100;
						}
					}
					
				}
				
				.date-picker {
					width: 100%;
					margin-top: 30rpx;
					
					display: flex;
					justify-content: left;
					// justify-content: center;
					align-items: center;
					
					.date {
						display: flex;
						flex-direction: column;
						// align-items: center;	
						text {
							font-size: 30rpx;
							font-weight: 700;
						}
						
						text:nth-child(1) {
							font-size: 16rpx;
							color: #C0C0C0;
							font-weight: 100;
						}
						
					}
					
					.night-num {
						margin: 0 80rpx;	
						text {
							font-size: 25rpx;
						}
					}
				}
			
				.search1 {
					width: 100%;
					margin-top: 20rpx;
					text {
						font-size: 25rpx;
						color: #C0C0C0;
					}
				}
				
				.btn-search {
					width: 100%;
					margin-top: 60rpx;
					border-radius: 50rpx;
					overflow: hidden;
					
					button {
						color: #FFFFFF;
						font-weight: 700;
						background-image: linear-gradient(to right, #85e491, #67c483);
					}
				}
			}
		}
	
		.tabbar {
			width: 100%;
			margin-top: 40rpx;
		}
		
		.recommend-hotel {
			margin: 0 20rpx;
			.title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					font-size: 35rpx;
					font-weight: 700;
				}
			}
			
			.waterfalls-flow {
				width: 100%;
				margin-top: 40rpx;
			}
		}
	}
</style>
